<template>
	<view class="container">
		<view class="box">
			<view class="imgBox">
				<image class="avatar" :src="addBase(user.avatar)" @click="chooseImg" />
			</view>
			<uni-easyinput class="input" prefixIcon="person" trim="all" v-model="user.username" placeholder="请输入账号" />
			<uni-easyinput class="input" prefixIcon="locked" trim="all" v-model="user.password" placeholder="请输入密码" />
			<uni-easyinput class="input" trim="all" v-model="user.height" placeholder="请输入身高(cm)" />
			<uni-easyinput class="input" trim="all" v-model="user.weight" placeholder="请输入体重(kg)" />
		</view>

		<button class="btn" @click="confirm">确认修改</button>
	</view>
</template>

<script>
import {
	addBase
} from '../../utils/myFunction';
import uploadFile from '../../utils/uploadFile';
import request from '../../utils/request';
export default {
	data() {
		return {
			user: {
				id: null,
				avatar: null,
				username: null,
				password: null,
				height: null,
				weight: null,
			}
		};
	},
	onLoad() {
		this.user = uni.getStorageSync('user')
	},
	methods: {
		chooseImg() {
			uploadFile().then(res => {
				this.user.avatar = res.fileName
				console.log(this.user);
			})
		},
		addBase(path) {
			return addBase(path)
		},
		confirm() {
			request({
				url: 'system/usr',
				method: 'PUT',
				data: this.user
			}).then(res => {
				uni.setStorageSync('user', this.user)
				uni.showToast({
					title: '修改成功',
					icon: 'success',
					success: (res) => {
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}, 2000)
					}
				})
			})
		}
	},
}
</script>

<style lang="scss">
.container {
	max-width: 100%;
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.box {
	width: 100%;
	max-width: 400px;
	padding: 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.imgBox {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;

	.avatar {
		width: 100px;
		height: 100px;
		border: 2px solid #ccc;
		border-radius: 50%;
		object-fit: cover;
		cursor: pointer;
		transition: border-color 0.3s ease;
	}

	.avatar:hover {
		border-color: #888;
	}
}

.input {
	margin-top: 10px;
}

.btn {
	width: 100%;
	max-width: 300px;
	padding: 10px;
	background-color: #888;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn:hover {
	background-color: #666;
	transform: translateY(-2px);
}
</style>